<template>
  <div style="text-align: center; font-size: 24px; font-weight: bold;padding-bottom: 20px; ">Vue3 组件通信</div>
  <div class="app-container">
    <!-- 导航区 -->
    <nav class="nav-menu">
      <RouterLink to="/props" class="nav-link">1.props</RouterLink>
      <RouterLink to="/event" class="nav-link">2.自定义事件</RouterLink>
      <RouterLink to="/bus" class="nav-link">3.mitt</RouterLink>
      <RouterLink to="/model" class="nav-link">4.v-model</RouterLink>
      <RouterLink to="/attrsListeners" class="nav-link">5.$attrs</RouterLink>
      <RouterLink to="/refChildrenParent" class="nav-link">6.$refs、$parent</RouterLink>
      <RouterLink to="/procidenInject" class="nav-link">7.provide、inject</RouterLink>
      <RouterLink to="/pinia" class="nav-link">8.pinia</RouterLink>
      <RouterLink to="/slot" class="nav-link">9.slot</RouterLink>
    </nav>
    <!-- 右侧内容区 -->
    <div class="content-area">
      <RouterView />
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<style scoped>
.app-container {
  display: flex;
  min-height: 80vh;
}

.nav-menu {
  width: 200px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nav-link {
  text-decoration: none;
  color: #333;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-link:hover {
  background-color: #e0e0e0;
  color: #000;
}

.nav-link.router-link-active {
  background-color: #4CAF50;
  color: white;
}

.content-area {
  background-color: #f5f5f5;
  flex: 1;
  padding: 20px;
}

</style>


